<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Clock</title>
  <link rel="stylesheet" href="./clock.css">
</head>

<body>
  <div id="clock">
    <ul class="hours">
      <li>
        <span> 1 </span>
      </li>
      <li>
        <span> 2 </span>
      </li>
      <li>
        <span> 3 </span>
      </li>
      <li>
        <span> 4 </span>
      </li>
      <li>
        <span> 5 </span>
      </li>
      <li>
        <span> 6 </span>
      </li>
      <li>
        <span> 7 </span>
      </li>
      <li>
        <span> 8 </span>
      </li>
      <li>
        <span> 9 </span>
      </li>
      <li>
        <span> 10 </span>
      </li>
      <li>
        <span> 11 </span>
      </li>
      <li>
        <span> 12 </span>
      </li>
    </ul>

    <div class="hr-wrapper">
      <div class="hand hr"></div>
    </div>
    <div class="min-wrapper">
      <div class="hand min"></div>
    </div>
    <div class="sec-wrapper">
      <div class="hand sec"></div>
    </div>
  </div>

  <script>
    var dateInfo = new Date()
    var hr = dateInfo.getHours() > 12 ? dateInfo.getHours() - 12 : dateInfo.getHours(),
      min = dateInfo.getMinutes(),
      sec = dateInfo.getSeconds(),
      milsec = dateInfo.getMilliseconds()

    var hrAngle = hr * 30 + (min * 6) / 12,
      minAngle = min * 6 + (sec * 6) / 60,
      secAngle = sec * 6 + (milsec * 0.36) / 1000

    function setAngle(wrapper, angle) {
      document.querySelector('.' + wrapper).style.transform = 'rotate(' + angle + 'deg)'
    }
    
    setAngle('hr-wrapper', hrAngle)
    setAngle('min-wrapper', minAngle)
    setAngle('sec-wrapper', secAngle)
  </script>
</body>

</html>